<template>
	<view class="add_order_pay">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'收银台',color:'#fff'}" />
		<!-- #endif -->
		<view class="project_detail">
			<view class="title">
				请在5分钟内完成支付，否则订单会自动取消!
			</view>
		</view>
		<view class="pay_mode">
			<view class="mode">
				<view class="pay_price">
					<view class="">
						订单编号：
						<text>{{orderId}}</text>
					</view>
					应付金额：
					<text>
						<text class="icon">￥</text> {{totalPrice}}
					</text>
				</view>
				<view class="pay_title">支付方式</view>
				<view class="pay_mode_item" v-for="(item,index) in payModeList" :key="index" @click="radioChange(index)">
					<view class="left">
						<view class="image">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{item.payName}}</text>
					</view>
					<radio-group>
						<text style="margin-right: 10px;" v-if="item.value == 0">{{user_money}}</text>
						<label class="radio">
							<radio color="#1ace6b" :value="item.value" :checked="index === current" />
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="submit">
			<view class="submit_button" @click="paySubmit">立即支付</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	import wx from "weixin-js-sdk"
	// #endif
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				orderData:{},	//订单信息
				user_money:'',	//用户余额
				orderId:'',		//订单编号
				current:0,
				payModeList:[
					{
						value:'0',
						url:'/static/images/orders/yue.png',
						payName:'账户余额',
					},
					{
						value:'1',
						url:'/static/images/orders/wx.png',
						payName:'微信支付',
					},
					{
						value:'2',
						url:'/static/images/orders/alipay.png',
						payName:'支付宝',
					},
				],
				totalPrice:0,
				remake:"",   //备注
			};
		},
		onLoad(options) {
			console.log(options,'-----------------options')
			if(options.data){
				let data = JSON.parse(options.data)
				this.orderData = data
				this.getOrders(data)
			}
		},
		methods:{
			getOrders(data){
				this.$http({
					url:'/api/pay_order/info',
					method:'get',
					data,
					success:result=>{
						console.log(result)
						let data = result.data.info
						this.totalPrice = data.pay_price
						this.orderId = data.order_no
						this.user_money = data.user_money
					}
				})
			},
			//支付方式单选
			radioChange(index){
				this.current = index
			},
			//支付
			paySubmit(){
				uni.showLoading({
					title:'支付中...'
				})
				let payType = ""
				if(this.current == 0){
					payType = "yue"
				}
				if(this.current == 1){
					payType = "wxpay"
				}
				if(this.current == 2){
					payType = "alipay"
				}
				this.orderPay(payType)
			},
			//支付
			orderPay(payType){
				console.log(this.orderData)
				this.orderData.pay_type = payType;
				this.orderData.from = this.$from()
				console.log(this.orderData,'---------------------------------------------orderData')
				// return false;
				this.$http({
					url:`/api/v2/pay_order`,
					method:'post',
					data:this.orderData,
					success:result=>{
						console.log(result,'------------------------支付完成')
						if(result.code == 200){
							if(result.data.info.js_config){
								var data = result.data.info.js_config;
								// #ifdef H5
								wx.config({
									debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									appId:data.appId, // 必填，公众号的唯一标识
									timestamp:data.timestamp , // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
									nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
									signType:data.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
									jsApiList: ['invoke'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
								});
								wx.invoke(
									'getBrandWCPayRequest', {
										"appId": data.appId, //公众号ID，由商户传入     
										"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数     
										"nonceStr": data.nonceStr, //随机串     
										"package": data.package,
										"signType": data.signType, //微信签名方式：     
										"paySign": data.paySign, //微信签名 
									}
								)
								// #endif
								uni.hideLoading()
							}else if(result.data.info.scheme_url){
								let url = result.data.info.scheme_url;
								// #ifdef H5
								if (uni.getSystemInfoSync().platform =='android') { //android终端
									window.open(url);
								} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
									window.location.href = url;
								}
								// #endif
								// #ifdef APP-PLUS
								plus.runtime.openURL(encodeURI(url), err => {
									console.log(err)
								})
								// #endif
							}else{
								uni.showToast({
									title:'支付成功',
								})
								setTimeout(()=>{
									uni.navigateBack({
										delta:2
									})
								},1500)
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.add_order_pay{
		width: 100%;
		height: 100%;
		padding-bottom: 70px;
		overflow-y: auto;
		overflow-x: hidden;
		.project_detail{
			margin:20px 12px;
			padding: 0 10px;
			background-color: #fff;
			border-radius: 8px;
			box-shadow: 0 5px 8px rgba(0, 0, 0, 0.06);
			>view{
				font-size: 28upx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #eee;
				padding:12upx;
				color: #000;
			}
			.project_container{
				width: 100%;
				padding: 0;
				display:flex;
				flex-direction: column;
				.project_item{
					width: 100%;
					display: flex;
					padding: 10px 0;
					.image{
						width: 89px;
						height: 89px;
						>image{
							width: 100%;
							height: 100%;
						}
					}
					.content{
						flex: 1;
						margin-left: 10px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.title{
							font-size: 18px;
							color: #2e2e2e;
							font-weight: bold;
						}
						.price_time{
							display: flex;
							align-items:center;
							.price{
								margin-right: 20px;
								color: #fd5c5b;
								font-size: 16px;
								font-weight: bold;
								>font{
									font-size: 20px;
								}
							}
							.time{
								display: flex;
								align-items: center;
								.time_image{
									width: 15px;
									height: 15px;
									margin-right: 5px;
									>image{
										width: 100%;
										height: 100%;
										margin-bottom: 5px;
									}
								}
							}
						}
					}
				}
			}
			.technician{
				height: 50px;
				line-height: 50px;
			}
			.remake{
				height: 50px;
				line-height: 50px;
				border: none;
				align-items: center;
			}
		}
		
		.pay_mode{
			margin: 20px 12px;
			.mode{
				margin: 12px 0;
				border-radius: 8px;
				box-shadow: 0 5px 8px rgba(0, 0, 0, 0.06);
				background-color: #fff;
				display: flex;
				justify-content: space-around;
				flex-direction: column; 
				.pay_price{
					margin: 0 20upx;
					font-size: 28upx;
					line-height: 64upx;
					>text{
						color: #fd5c5b;
						font-weight: bold;
						.icon{
							font-size: 22upx;
						}
					}
				}
				.pay_title{
					// margin: 0 20upx;
					padding: 10px;
					font-size: 16px;
					font-weight: 500;
					color: #707070;
				}
				.pay_mode_item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding:10px;
					font-size: 28upx;
					.left{
						display: flex;
						align-items: center;
						.image{
							width: 32.5px;
							height: 32.5px;
							margin-right: 15px;
							>image{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
					}
				}
			}
		}
	
		.submit{
			width: 100%;
			margin-top: 100upx;
			.all_price{
				font-size:20px;
				font-weight: bold;
				color: #fd5c5b;
			}
			.submit_button{
				padding: 20upx 0;
				margin: 0 40upx;
				border-radius: 40upx;
				background: #24d576;
				color: #fff;
				font-weight: bold;
				font-size: 20px;
				text-align: center;
			}
		}
	}
</style>
